<extend name="Base/common"/>
<block name="style">
<style>
.progress{
    margin-bottom: 0px;
}
td.cell-day.current-month.future{
    cursor: pointer;
}
.events{
    <eq name='ainfo.type' value='0'>
    height:70px;
    <else/>
    height: 35px
    </eq>
}
.calendar.limit-event-title .event{
    height: 100%;
}
</style>
</block>
<block name="body">
    <div id="frm-post-popup" class="white-popup boxShadowBorder" style="max-width: 100%">
        <h2>{$ainfo['name']} <small>点击"报名"即可预约查体</small> </h2>

        <div class="aline" style="margin-bottom: 10px">{$subtitle}</div>
        <div>
            <div class="row">
                <form class="form-horizontal  ajax-form" role="form" action="__SELF__" method="post">
                    <notempty name="content.id">
                        <input type="hidden" name="id" id="id" value="{$content.id}"/>
                    </notempty>
                    <input type="hidden" name="aid" id="aid" value="{$content.aid}"/>
                    <div class="col-md-12">
                        <div class="form-group col-md-6">
                            <label for="mobile" class="col-sm-3 control-label">姓名</label>
                            <div class=" col-md-9">
                                <p class="form-control">{$userinfo.real_name}</p>
                            </div>
                        </div><div class="form-group col-md-6">
                        <label for="mobile" class="col-sm-3 control-label">出生日期</label>
                        <div class=" col-md-9">
                            <p class="form-control">{$userinfo.birthdate}</p>
                        </div>
                    </div>
                        <div class="form-group col-md-6">
                            <label for="mobile" class="col-sm-3 control-label"><span class="text-danger">*</span> 手机号</label>
                            <div class=" col-md-9">
                                <input id="mobile" name="mobile" class="form-control" value="{$content.mobile}" placeholder="手机号"/>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="department_id" class="col-sm-3 control-label"><span class="text-danger">*</span> 部门</label>
                            <div class=" col-md-9">
                                <select id="department_id" name="department_id" class="form-control">
                                    <volist name="dmaplist" id="d">
                                        <option value="{$d.id}" <eq name="content['department_id']" value="$d['id']"> selected</eq>>
                                        {$d.name}
                                        </option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label class="col-sm-3 control-label">可选择自费项目</label>
                            <div class=" col-md-9">
                                <volist name="ainfo.chealth_project" id="v">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="project[]" value="{$v.name}"
                                            <eq name="v.is_checked" value="true">checked</eq>
                                            > {$v.name} 费用 {$v.cost} 元
                                        </label>
                                    </div>
                                </volist>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 nobr">
                        <h2><span class="text-danger">*</span>点击<span class="text-success">绿色区域</span>进行报名
                            <button class="btn pull-right" type="button">白色表示不可报名</button>
                            <button class="btn btn-success pull-right" type="button">绿色表示可报名</button>
                            <button class="btn btn-danger pull-right" type="button">红色表示已报满</button></h2>
                    </div>
                    <div class="col-md-12">
                        <input type="hidden" id="chealth_time" name="chealth_time">
                        <div id="calendar" class="calendar"></div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-2">
                            <button onclick="history.go(-1);" class="btn btn-primary " href="{:U('index')}">返回
                            </button>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</block>
<block name="script">

    <link href="/Application/Admin/Static/zui/lib/datetimepicker/datetimepicker.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/Application/Admin/Static/zui/lib/datetimepicker/datetimepicker.min.js"></script>
    <script src="__STATIC__/layer/layer.js"></script>
    <script src="/Public/zui/lib/calendar/zui.calendar.js"></script>
    <link rel="stylesheet" href="/Public/zui/lib/calendar/zui.calendar.min.css">
    <script src="/Public/zui/lib/chosen/chosen.min.js"></script>
    <link rel="stylesheet" href="/Public/zui/lib/chosen/chosen.min.css">
    <script>
        <eq name="ainfo.type" value="1">
        $(function(){
            var allow_time = {$allow_time};
            var submitEnter = function(e){
                if(e.fullenter){
                    return null;
                }
                if(e.chealthtimestmp <= allow_time){
                    layer.msg('请选择'+(new Date(allow_time*1000).format('yyyy-MM-dd'))+'以后的日期');
                    return null;
                }
                layer.confirm('确认预约【'+ e.chealthtime+'】查体?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $('#chealth_time').val(e.chealthtimestmp);
                    $('.ajax-form').submit();
                    layer.closeAll();
                }, function(){

                });
            };
            var startDate = [
                '{:date("Y-5-1")}',
                '{:date("Y-6-1")}'
            ];
            var indexd = 0;
            $('.calendar').each(function() {
                var $this = $(this);
                var data = {
                    calendars: [
                        {name: "success", color: 'green'},
                        {name: "warning", color: 'yellow'},
                        {name: "danger", color: 'red'},
                        {name: "info", color: 'blue'},
                        {name: "important", color: 'brown'},
                        {name: "special", color: 'purple'},
                        {name: "primary", color: 'primary'}
                    ],
                    events: [
                        <volist name="ainfo.enterList" id="v">
                        {
                            title: ' <egt name='v.count' value='$ainfo["single_day_limit"]'>{$ainfo['single_day_limit']}<else/>{$v.count}</egt>/{$ainfo.single_day_limit}',
                            desc: '<egt name="v.count" value="$ainfo.single_day_limit">已报满<else/>可报名</egt>',
                            allDay: true,
                            calendar: '<egt name="v.count" value="$ainfo['single_day_limit']">danger<else/>success</egt>',
                            start: "{$v.time|time_format='Y-m-d'}",
                            end: "{$v.time|time_format='Y-m-d'}",
                            chealthtimestmp: "{$v.time}",
                            chealthtime: "{$v.time|time_format='Y-m-d'}",
                            fullenter: <eq name="v.count" value="ainfo.single_day_limit">true<else/>false</eq>
                        },
                        </volist>
                    ]
                };
                var option = {
                    startDate: startDate[indexd],
                    dragThenDrop: false,
                    data: data,
                    withHeader: true,
                    clickEvent: function(e) {
                        submitEnter(e.event);
                    },
                    clickCell: function(e){
                        var timestamp = e.date.valueOf() / 1000;
                        var is_back = true;
                        for(var i = 0, len = e.events.length; i < len; i++){
                            if(e.events[i].chealthtimestmp == timestamp){
                                is_back = false;
                                submitEnter(e.events[i]);
                            }
                            if(is_back){
                                layer.msg('请点击绿色可报名区域进行报名');
                            }
                        }
                    }
                };
                $this.calendar(option);
                ++indexd;
            });
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('#department_id').chosen({
                drop_direction:'down'
            });
        })
        <else/>
        $(function(){
            var allow_time = {$allow_time};
            var submitEnter = function(e){
                if(e.fullenter){
                    return null;
                }
                if(e.chealthtimestmp <= allow_time){
                    layer.msg('请选择'+(new Date(allow_time*1000).format('yyyy-MM-dd'))+'以后的日期');
                    return null;
                }
                layer.confirm('确认预约【'+ e.chealthtime+'】查体?', {
                    btn: ['确定','取消'] //按钮
                }, function(){
                    $('#chealth_time').val(e.chealthtimestmp);
                    $('.ajax-form').submit();
                    layer.closeAll();
                }, function(){

                });
            };
            var startDate = [
                '{:date("Y-5-1")}',
                '{:date("Y-6-1")}'
            ];
            var indexd = 0;
            $('.calendar').each(function() {
                var $this = $(this);
                var data = {
                    calendars: [
                        {name: "success", color: 'green'},
                        {name: "warning", color: 'yellow'},
                        {name: "danger", color: 'red'},
                        {name: "info", color: 'blue'},
                        {name: "important", color: 'brown'},
                        {name: "special", color: 'purple'},
                        {name: "primary", color: 'primary'}
                    ],
                    events: [
                        <volist name="ainfo.enterList" id="v">
                            {
                                <php>$temp_data_time = date('H', $v['time'])</php>
                                title: ' <eq name='temp_data_time' value='0'>上午<else/>下午</eq> <egt name='v.count' value='$ainfo["single_day_limit"]'>{$ainfo['single_day_limit']}<else/>{$v.count}</egt>/{$ainfo.single_day_limit}',
                                desc: '<egt name="v.count" value="$ainfo.single_day_limit">已报满<else/>可报名</egt>',
                                allDay: true,
                                calendar: '<egt name="v.count" value="$ainfo['single_day_limit']">danger<else/>success</egt>',
                                start: "{$v.time|time_format='Y-m-d H:i'}",
                                end: "{$v.time|time_format='Y-m-d H:i'}",
                                chealthtimestmp: "{$v.time}",
                                chealthtime: "{$v.time|time_format='Y-m-d'} <eq name='temp_data_time' value='0'>上午<else/>下午</eq>",
                                fullenter: <eq name="v.count" value="ainfo.single_day_limit">true<else/>false</eq>
                            },
                        </volist>
                    ]
                };
                var option = {
                    startDate: startDate[indexd],
                    dragThenDrop: false,
                    data: data,
                    withHeader: true,
                    clickEvent: function(e) {
                        submitEnter(e.event);
                    },
                    clickCell: function(e){
                        var timestamp = e.date.valueOf() / 1000;
                        var is_back = true;
                        for(var i = 0, len = e.events.length; i < len; i++){
                            if(e.events[i].chealthtimestmp == timestamp){
                                is_back = false;
                                submitEnter(e.events[i]);
                            }
                            if(is_back){
                                layer.msg('请点击绿色可报名区域进行报名');
                            }
                        }
                    }
                };
                $this.calendar(option);
                ++indexd;
            });
            $('.form-datetime').datetimepicker({
                language: "zh-CN",
                autoclose: true,
                format: 'yyyy-mm-dd hh:ii'
            });
            $('.form-date').datetimepicker({
                language: "zh-CN",
                minView: 2,
                autoclose: true,
                format: 'yyyy-mm-dd'
            });
            $('#department_id').chosen({
                drop_direction:'down'
            });
        })
        </eq>
    </script>
</block>